<template>
    <div class="detailmain">
        <div v-if="postdata.id != undefined" class="postda">
            <div class="delauthor">
                <div class="delavatar">
                    <img class="delhead" :src="baseURL + postdata.user.avatar" alt="">
                </div>
                <div class="delname">
                    <div class="delnickname">{{ postdata.user.nickname }}</div>
                    <div class="delintroduction">{{ postdata.user.introduce }}</div>
                </div>
            </div>
            <div class="delpost">
                <div class="delposttime"><span>发布时间：{{ postdata.created_at }}</span></div>
                <div class="delposttime"><span>更新时间：{{ postdata.updated_at }}</span></div>
                <div class="delposttime"><span>所属板块：{{ categoryName }}</span></div>
                <div class="delcontent"><h2>{{ postdata.title }}</h2></div>
                <div class="delcontent" v-html="postdata.content"></div>
                
                <div class="delimg">
                    <img class="delimgitem" v-for="item in postdata.post_img" :src="baseURL + item.url" alt="">
                </div>
            </div>
            <div class="delinfo">
                <div class="dellike">
                    <div class="dellikeicon">
                        <img v-if="postdata.is_like" @click="delpostlike" class="dellikeiconitem"
                            src="../static/icons/leve-se.png" alt="">
                        <img v-else  @click="delpostlike" class="dellikeiconitem" src="../static/icons/love.png" alt="">
                        <span class="dellikecount">{{ postdata.like_count }}</span>
                    </div>
                </div>
                <div class="delcollect">
                    <span v-if="postdata.is_favorite" class="delcollect"><el-icon size="50" @click="delpostcollect">
                            <StarFilled color="#FFCC00" />
                        </el-icon><span class="dellikecount">{{ postdata.favorite_count }}</span></span>
                    <span v-else class="delcollect"><el-icon size="50" @click="delpostcollect">
                            <Star />
                        </el-icon><span class="dellikecount">{{ postdata.favorite_count }}</span></span>
                </div>
            </div>
            <div class="delcomments">
                <div class="delcommenthead">
                    共有<span class="delcommentcount">{{ postdata.comments.length }}</span>条评论：
                </div>
                <div class="delinpputcomment">
                    <el-input class="delcommentinput" type="textarea" placeholder="请输入评论内容" rows="10" show-word-limit
                        clearable v-model="comment"></el-input>
                    <el-button class="delcommentbtn" type="primary" @click="postcommentbtn">评论</el-button>
                </div>
                <div class="delcommentlist">
                    <div v-for="item in postdata.comments" class="delcommentitem">
                        <div class="delcommentauthor">
                            <div class="delcommentavatar">
                                <img class="delhead" :src="baseURL + item.user.avatar" alt="">
                                <div class="delcommentavatarline">
                                    <div class="delcommentname">{{ item.user.nickname }}
                                    <span class="delcommenttime">{{ item.created_at }}</span>
                                    </div>
                                    <div class="delcommentcontent">{{ item.content }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import {getpostdetail,likepost,collectpost,commentpost} from '@/apis/post'
import { baseURL } from '@/baseurl';
import { ElIcon } from 'element-plus';
import {toast} from '@/composables/utils';

const route = useRoute();
const postdata = ref({
    user: {
        avatar: '',
        nickname: ''
    },
    title: '',
    content: '',
    created_at: '',
    updated_at: '',
    like_count: 0,
    comment_count: 0,
    favorite_count: 0,
    is_like:false

});
const comment=ref('')

onMounted(async () => {
    const postId = route.params.id;
    console.log(postId);
     
    const res = await getpostdetail(postId);
    postdata.value = res.data;
    console.log('post data is ',postdata.value);
    console.log(res);
   
});

// 点赞和取消点赞
function delpostlike() {
    if(postdata.value.is_like){
        likepost({
    postid:route.params.id
        }).then(res=> {
            postdata.value.is_like = false;
        postdata.value.like_count--;
        })
       
    }else{
        likepost({
            postid:route.params.id
        }).then(res=>{
            postdata.value.is_like = true;
            postdata.value.like_count++;
        }) 
}
}


// 收藏和取消收藏
function delpostcollect() {
    if(postdata.value.is_favorite){
        collectpost({
            postid:route.params.id
        }).then(res=>{
            postdata.value.is_favorite = false;
            postdata.value.favorite_count--;
        })
    }else{
        collectpost({
            postid:route.params.id
        }).then(res=>{
            postdata.value.is_favorite = true;
            postdata.value.favorite_count++;
        })
    
    }
}
    // 使用计算属性将数字转换为对应的文字
    const categoryName = computed(() => {
        const categoryNumber = parseInt(postdata.value.category, 10); // 将字符串转换为数字类型
      switch (categoryNumber) {
        case 1:
          return '体育';
        case 2:
          return '音乐';
        case 3:
          return '学习';
        default:
          return '';
      }
    });
    // 评论
   function postcommentbtn () {
        if (comment.value == '') {
            toast("请输入评论内容！",error)
            return
        }
        commentpost({
            postid:postdata.value.id,
            content:comment.value
        }).then(res=> {
            // const res2 =  getpostdetail(postId);
            // postdata.value = res2.data;
            window.location.reload();
        })
        
    }



</script>

<style>
.delposttime{
    margin-left: 30px;
    margin-bottom: 20px;
    font-size: smaller;
}
.delcommenttime{
    margin-left: 40px;
    font-size: small;
    font-weight: 100;
}
.delcommentcontent{
    margin-left: 40px;
    margin-top: 20px;
    height: auto;
    overflow: auto;


}
.delcommentname{
    font-weight: bold;
    font-size: x-large;
    margin-left: 40px;
    margin-top: -40px

}
.delcommentavatarline{
    display: flex;
    flex-direction: column;
    justify-content:start;
}
.delcommentavatar{
    display: flex;
    flex-direction: row;
    margin: 10px 20px 10px 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    align-items: center;
}
.delcommentitem {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 30px;
    margin-right: 30px;
    min-height: 100px;
    border-radius: 10px;
}



.delinpputcomment {
    margin: 30px 30px 20px 30px;
    text-align: right;
    height: auto;
    border-bottom: 200px;
}

.dellikeiconitem {
    width: 40px;
}
.dellikeiconitem:hover{
    cursor: pointer;
}
.delcommentbtn {
    margin-top: 20px;
    margin-right: 10px;
    height: 50px;
    width: 20%
}

.delcollect {
    position: relative;
    top: -4px;
}
.delcollect{
    cursor: pointer;
}

.delcommentcount {
    font-weight: bold;
    font-size: larger;
    margin-left: 5px;
    margin-right: 5px;
}

.dellikecount {
    margin-left: 14px;
    font-size: 30px;
    position: relative;
    top: -10px;

}

.delinfo {
    margin-top: 30px;
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    border-bottom: solid 2px rgb(120, 120, 120);
}

.delimgitem {
    width: 26%;
    height: auto;
    margin: 10px;
}

.delimg {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
    margin-left: auto;
    margin-right: 30px;
    padding-bottom: 30px;
}

.delcontent {
    font-size: 20px;
    margin-left: 30px;
    margin-right: 30px;
}



.delavatar {
    border-radius: 50%;
    margin-left: 30px;
}

.delhead {
    width: 140px;
    border-radius: 50%;
}

.delauthor {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 200px;
}

.delname {
    margin-left: 30px;
}

.delnickname {
    margin-bottom: 30px;
    font-size: x-large;
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.delintroduction {
    font-size: medium;
    width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;
}
</style>
